<template>
  <div class="cspz">
    <Card title="基本信息">
      <el-form label-width="120px" inline :model="formA">
        <el-form-item label="节点名称">
          <el-input v-model="formA.valA"></el-input>
        </el-form-item>
        <el-form-item label="分区名称">
          <el-input v-model="formA.valB"></el-input>
        </el-form-item>
        <el-form-item label="服务">
          <el-input v-model="formA.valC"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formA.valD"></el-input>
        </el-form-item>
        <el-form-item label="节点IP">
          <el-input v-model="formA.valE"></el-input>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="配置">
      <el-form label-width="120px" inline :model="formB">
        <el-form-item label="名称">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="平台节点"></el-checkbox>
            <el-checkbox label="服务器信息节点"></el-checkbox>
            <el-checkbox label="外部端口节点"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <br />
        <el-form-item label="配置备注">
          <el-input
            v-model="formB.valB"
            type="textarea"
            :rows="4"
            placeholder="配置内容填写"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <section style="float:right;margin:20px">
        <el-button
          type="primary"
          @click="
            $message({
              message: '已提交',
              type: 'success'
            })
          "
          >提交</el-button
        >
        <el-button type="primary">取消</el-button>
      </section>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
export default {
  components: {
    Card
  },

  data() {
    return {
      checkList: ['平台节点'],
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: ''
      },
      formB: {
        valA: '',
        valB: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cspz {
  .el-input {
    width: 300px;
  }
  .el-textarea {
    width: 500px;
  }
}
</style>
